<!--  -->
<template>
  <div>
    <!-- <div class="head">
      <div class="wrap title"><span class="icon" @click="back">返回</span></div>
    </div> -->
    <div class="wrap">
      <div class="userInfo clear" v-show="boxShow">
        <div class="userName fl">{{ holderName }}</div>
        <div class="follow fl clear" @click="changeFlow">
          <div class="img fl" :class="{ collected: followStatus }"></div>
          <p class="txt fl">{{ followStatus ? "已关注" : "+关注" }}</p>
        </div>
        <div class="back fr" @click="back">返回上一页</div>
      </div>
      <div class="table" v-show="boxShow">
        <div class="tag flex">
          <span
            class="item"
            v-for="item in tags"
            :key="item.value"
            :class="{ cur: params.type == item.value }"
            @click="changeTag(item)"
            >{{ item.label }}</span
          >
        </div>
        <table>
          <thead>
            <tr>
              <td width="60">序号</td>
              <td
                v-for="item in theads"
                :key="item.value"
                v-html="item.label"
              ></td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td
                v-for="nav in theads"
                :key="nav.value"
                v-html="item[nav.value]"
              ></td>
            </tr>
          </tbody>
        </table>
        <div class="noMore" v-show="noMore">暂无数据</div>
      </div>
      <m-page
        v-show="boxShow"
        @onPage="onPage"
        :pageSize="params.pageSize"
        :currentPage="params.pageNo"
        :total.sync="total"
      ></m-page>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getDataList, checkfollow, follow, unfollow } from "../api/index";
const mPage = () => import("../components/mPage");
import { numberFormat } from "../script/utils";
import dayjs from "dayjs";
export default {
  data() {
    return {
      holderName: "",
      params: {
        moduleId: 2,
        orgCode: "",
        type: 1,
        pageNo: 1,
        pageSize: 15,
      },
      boxShow: false,
      followStatus: 0,
      total: 0,
      noMore: "",
      tags: [
        {
          label: "持有流通股股票",
          value: 1,
        },
        {
          label: "持有股份股票",
          value: 2,
        },
      ],
      tableData: [],
      theads: [
        {
          label: "股票代码",
          value: "stockCode",
        },
        {
          label: "股票简称",
          value: "stockName",
        },
        {
          label: "所属行业",
          value: "industry",
        },
        {
          label: "地域",
          value: "region",
        },
        {
          label: "融资融券<br/>标的",
          value: "marginStatus",
        },
        {
          label: "持有数量<br/>（万股）",
          value: "shareNum",
        },
        // {
        //   label: "股份性质",
        //   value: "shareType",
        // },
        {
          label: "占总股本比例",
          value: "holdRatio",
        },
        {
          label: "持股变动",
          value: "changeNum",
        },
        {
          label: "总市值",
          value: "marketCap",
        },
        {
          label: "报告期",
          value: "reportDate",
        },
      ],
    };
  },

  components: { mPage },

  computed: {
    ...mapState(["holder"]),
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例
      vm.holderName = vm.holder.holderName;
      vm.params.orgCode = vm.holder.orgCode;
      vm.params.pageNo = 1;
      vm.getDataList();
      vm.checkfollow();
    });
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    changeTag(row) {
      this.params.type = row.value;
      this.params.pageNo = 1;
      this.getDataList();
    },
    onPage(page) {
      this.params.pageNo = page;
      this.getDataList();
    },
    async getDataList() {
      await getDataList(this.params).then((back) => {
        if (back.status == 1) {
          let list = back.data.list;
          let total = back.data.total;
          this.tableData = list.map((item) => {
            item.marginStatus = ["否", "是"][item.marginStatus];
            if (item.changeNum > 0) {
              item.changeNum = `<span class="red">增持</span>`;
              item.marketCap = `<span class="red">${numberFormat(
                item.marketCap
              )}</span>`;
            } else {
              item.changeNum = `<span class="green">减持</span>`;
              item.marketCap = `<span class="green">${numberFormat(
                item.marketCap
              )}</span>`;
            }
            // item.shareType = item.shareType || "--";
            item.reportDate = dayjs(item.reportDate).format("YYYY-MM-DD");
            item.tradeDate = dayjs(item.reportDate).format("YYYY-MM-DD");
            item.shareNum = Number(item.shareNum / 10000).toFixed(2);
            item.unltdVol = numberFormat(item.unltdVol);
            return item;
          });
          this.noMore = total == 0 ? true : "";
          this.total = total;
          this.boxShow = true;
        }
      });
    },
    async checkfollow() {
      const { userId } = this.$route.params;
      await checkfollow({
        moduleId: this.params.moduleId,
        orgCode: this.params.orgCode,
        // holderName: this.params.holderName,
        userId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.followStatus = data;
        }
      });
    },
    changeFlow() {
      this.followStatus ? this.unfollow() : this.follow();
    },
    async follow() {
      const { userId } = this.$route.params;
      await follow({
        moduleId: this.params.moduleId,
        orgCode: this.params.orgCode,
        userId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.followStatus = true;
        }
      });
    },
    async unfollow() {
      const { userId } = this.$route.params;
      await unfollow({
        moduleId: this.params.moduleId,
        orgCode: this.params.orgCode,
        userId,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.followStatus = false;
        }
      });
    },
  },
};
</script>
<style>
table .red {
  color: #ea2827;
}
table .green {
  color: #31ed24;
}
@keyframes collect-image {
  0% {
    background-size: 40px;
  }
  40% {
    background-size: 80px;
  }
  60% {
    background-size: 55px;
  }
  70% {
    background-size: 75px;
  }
  80% {
    background-size: 60px;
  }
  90% {
    background-size: 70px;
  }
  100% {
    background-size: 63px;
  }
}
@keyframes collect-before1 {
  0%,
  70% {
    border-width: 1px;
  }
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    transform: scale(2.5);
    border-width: 0px;
    opacity: 0;
  }
}
@keyframes collect-after1 {
  0% {
    opacity: 0;
    transform: scale(0.5);
    box-shadow: calc(17px) calc(-17px + 8px) 0px 0px #e94c4c,
      0px calc(-15px - 4px) 0px 0px #4caf50,
      calc(-17px) calc(-17px + 8px) 0px 0px #009688,
      0px calc(15px + 4px) 0px 0px #673ab7,
      calc(17px) calc(17px - 8px) 0px 0px #ff9800,
      calc(-17px) calc(17px - 8px) 0px 0px #795548;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
    box-shadow: calc(17) calc(-17 + 8px) 0px -10px #e94c4c,
      0px calc(-17 - 4px) 0px -10px #4caf50,
      calc(-17) calc(-17 + 8px) 0px -10px #009688,
      0px calc(15 + 4px) 0px -10px #673ab7,
      calc(17) calc(17 - 8px) 0px -10px #ff9800,
      calc(-17) calc(17 - 8px) 0px -10px #795548;
  }
}
</style>
<style lang="scss" scoped>
.wrap {
  width: 1200px;
  margin: 0 auto;
  .userInfo {
    margin: 10px 0;
    position: relative;
    .userName {
      font-size: 26px;
      color: #ff8a00;
      line-height: 42px;
    }
    .follow {
      cursor: pointer;
      transition: background-color 0.3s;
      .img {
        border: 1px solid #e83a3a;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        margin: 0 10px 0 20px;
        background: url($PIC_URL + "/tlbypcWeb/monitor/heart.png") no-repeat
          center;
        background-size: 63px;
        position: relative;
        top: 8px;
        &::before,
        &::after {
          content: "";
          position: absolute;
          border-radius: 100%;
          pointer-events: none;
          display: block;
        }
        &::before {
          width: 26px;
          height: 26px;
          top: -1px;
          left: -1px;
          border: 1px solid #ea4c4c;
          opacity: 0;
        }
        &::after {
          width: 8px;
          height: 8px;
          position: absolute;
          padding: 0 !important;
          display: inline-block;
          opacity: 0;
          border-radius: 100%;
          box-shadow: calc(17px) calc(-17px + 8px) 0px 0px #e94c4c,
            0px calc(-15px - 4px) 0px 0px #4caf50,
            calc(-17px) calc(-17px + 8px) 0px 0px #009688,
            0px calc(15px + 4px) 0px 0px #673ab7,
            calc(17px) calc(17px - 8px) 0px 0px #ff9800,
            calc(-17px) calc(17px - 8px) 0px 0px #795548;
          pointer-events: none;
          left: calc(50% - 4px);
          top: calc(50% - 4px);
        }
        &.collected {
          background: #e83a3a url($PIC_URL + "/tlbypcWeb/monitor/heart.png")
            no-repeat center;
          background-size: 63px;
          animation: collect-image 0.5s linear;
          &::before {
            animation: collect-before1 1s cubic-bezier(0.03, 0.16, 0.4, 1.68);
          }
          &::after {
            animation: collect-after1 1s cubic-bezier(0.48, 0.37, 0.43, 0.42)
              forwards;
          }
        }
      }
      .txt {
        font-size: 16px;
        color: #d03536;
        text-align: center;
        line-height: 42px;
      }
    }
    .back {
      width: 108px;
      height: 30px;
      background: linear-gradient(0deg, #343845, #4e596d);
      border: 1px solid #3d3d4b;
      border-radius: 2px;
      cursor: pointer;
      margin-top: 4px;
      color: #fff;
      font-size: 15px;
      text-align: center;
      line-height: 30px;
      &:hover {
        background: linear-gradient(180deg, #b93636, #6a0101);
        border: 1px solid #b83636;
      }
    }
  }
  .table {
    border: 2px solid #27282e;
    border-radius: 6px;
    .tag {
      align-items: center;
      height: 34px;
      background: #27282e;
      .item {
        font-size: 16px;
        color: #cccccc;
        display: inline-block;
        padding: 5px 10px;
        margin: 0 10px;
        cursor: pointer;
        &.cur {
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
    table {
      width: 100%;
      font-size: 15px;
      color: #cccccc;
      text-align: center;
      table-layout: fixed;
      td {
        line-height: 19px;
        padding: 5px;
      }
      thead {
        background: #1c1d21;
        td {
          border: 1px solid #323337;
        }
      }
      tbody {
        tr:nth-of-type(2n) {
          background: #111117;
        }
        td {
          border: 1px solid #25262a;
        }
      }
    }
    .noMore {
      line-height: 200px;
      text-align: center;
      color: #b8b4b4;
      font-size: 16px;
    }
  }
}
</style>
